A Pie chart using gradients as colors

Using gradients to achieve a bevel effect

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.pie.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="400" height="300">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        function createGradient (obj, color)
        {
            return RGraph.radialGradient(
                obj,
                200, 150, 95, 200, 150, 125,
                color, 'black'
            )
        }

        /**
        * Because the pie object is going to be used in one of the options it must
        * be first created - and then we must use the set call to set the properties
        */
        var pie = new RGraph.Pie({
            id: 'cvs',
            data: [4,3,2,6,8],
        })
        
        pie.set({
            colors: [
                createGradient(pie, '#ABD874'),
                createGradient(pie, '#E18D87'),
                createGradient(pie, '#599FD9'),
                createGradient(pie, '#F4AD7C'),
                createGradient(pie, '#D5BBE5')
            ],
            shadowOffsetx: 5,
            shadowOffsety: 5,
            shadowBlur: 15,
            shadowColor: '#bbb',
            tooltips: ['Robert','Louise','Peter','Kevin','Jack'],
            labelsSticksColors: ['green','red','blue','orange','purple'],
            labels: ['Robert','Louise','Peter','Kevin','Jack'],
            labelsSticksList: true,
            radius: 100,
            strokestyle: 'rgba(0,0,0,0)',
            textAccessible: true
        }).draw();
    };
</script>